<html>
<head>
    <title>Manage users</title>
    <script type="text/javascript" src="myspaces://javascript/jquery.js"></script>
    <script type="text/javascript" src="myspaces://javascript/jquery.json.js"></script>
    <script type="text/javascript">
            var usersdata;

            function saveForm(id)
            {
                var form;
                form = '<div id="saveuser'+id+'" style="display:none;">'
                       + '<form id="saveForm'+id+'" action="javascript:saveUser('+id+');" method="POST">'
                       + '<input type="text" id="login'+id+'">'
                       + '<input type="password" id="password'+id+'">'
                       + '<input type="submit" value="save">'
                       + '</form></div>';
                return form;
            }

            function saveUser(id)
            {
                usersdata.users[id].user = $("#login"+id+"").val();
                usersdata.users[id].password = window.myspaces.codePassword($("#password"+id+"").val());
                showUsers();
            }

            function showUsers()
            {
                userstext = window.myspaces.getUsers();
                usersdata = $.evalJSON(userstext);
                $("#users").empty();
                for(var i=0;i<usersdata.users.length;i++)
                {
                    console.log(i);
                    var form = saveForm(i);
                    $("#users").append(
                            '<div>User: ' + usersdata.users[i].user
                                    + ' <a onclick="editUser('+ i + ')" href="#">Edit</a> </div>'
                                    + form
                    );
                }
            }

            $(document).ready(function() {
                showUsers();
                $("#text").text($.toJSON(usersdata.users));
                $("#adduser").hide();
            });

            function editUser(id)
            {
                $("#login"+id+"").val(usersdata.users[id].user);
                $("#password"+id+"").val(window.myspaces.codePassword(usersdata.users[id].password));
                $("#saveuser"+id+"").slideDown();
                $("#saveuser"+id+"").show();
            }

            function addUser()
            {
                usersdata.users.push({"user":$("#login").val(), "password":window.myspaces.codePassword($("#password").val())});
                console.log(usersdata.users);
                $("#adduser").slideUp();
                window.myspaces.setUsers($.toJSON(usersdata));
                showUsers();
            }

            function showForm()
            {
                $("#adduser").slideDown();
                $("#adduser").show();
            }
        </script>
    </head>
    <body>
    <a onclick="showForm()" href="#">Add user</a>
    <div id="adduser">
        <form id="myForm" action="javascript:addUser();" method="POST">
            <input type="text" id="login">
            <input type="password" id="password">
            <input type="submit" value="save">
        </form>
    </div>
    <div id="users"></div>
    </body>
    </html>
